<template>
    <div class="wrap">
      <CHeader content="目标责任" ref="head"></CHeader>
      
      <div class="box">
        <el-radio-group v-model="filter.address" >
          <el-radio-button
            v-for="(item, index) in regionArray"
            :key="index"
            :label="item.label"
          >{{ item.name }}</el-radio-button
          >
        </el-radio-group>
      </div>
      <div class="query" >
        <div class="box noAfter">
          <el-radio-group v-model="filter.year" >
            <el-radio-button
              v-for="(item, index) in yearArray"
              :key="index"
              :label="item.label"
            >{{ item.name }}</el-radio-button
            >
          </el-radio-group>
        </div>
        <div class="total">
          <div class="item purple">
            <img :src="imgs.left"/>
            <span>目标总数：<i>{{total.target}}</i></span>
          </div>
          <div class="item green">
            <img :src="imgs.right"/>
            <span>达标率：<i>{{total.complianceRate}}%</i></span>
          </div>
        </div>
        

        <div class="query-table">
          <div class="l-middle">
            <span>合计: {{this.pageOption.total}}</span>
            <button class="derive" @click.stop="exportExcel">导出</button>
          </div>
          <TableBox
            :cellStyle="tableRowStyle"
            :data="tableData"
            :headerCellStyle="{
              background: '#E0EAF5',
              height: '32px !important',
            }"

            :headerRowStyle="{ height: '16px' }"

            :pageOption.sync="pageOption"
            @sizeChange="handleSizeChange"
            @currentChange="handleCurrentChange"
            
            :height="tabelHeight"
            :mainMaxHeight="200"
          >
            <el-table-column prop="date" label="序号" align="center">
            </el-table-column>
            <el-table-column prop="name" label="企业名称" align="center">
            </el-table-column>
            <el-table-column prop="address" label="所属县区" align="center">
            </el-table-column>
            <el-table-column prop="object" label="企业年度目标" align="center">
              <template slot-scope="scope">
                <span style="color: #4d7ee9">{{ scope.row.object }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="goal" label="达标率" align="center">
            </el-table-column>
            <el-table-column
              prop="ability"
              label="全员岗位目标责任书"
              align="center"
            >
              <template slot-scope="scope">
                <span
                  style="
                    {
                      color: #4d7ee9;
                    }
                  "
                >{{ scope.row.ability }}</span
                >
              </template>
            </el-table-column>
          </TableBox>
        </div>
      </div>
    </div>
</template>

<script>
import CHeader from "@/components/Cheader/Cheader";
import TableBox from "@/components/tableBox/tableBox";
import * as browser from "@/utils/browser";
const {IEVersion,resizeObserver} = browser.default;

export default {
  name: "mbzr",
  components: {
    CHeader,
    TableBox
  },
  data() {
    return {
      tabelHeight: 0,
      total:{
        target:0,
        complianceRate:0
      },
      imgs:{
        left:require('@/assets/images/menus/query/icon_left.png'),
        right:require('@/assets/images/menus/query/icon_right.png')
      },
      tableData: [],
      pageOption:{
        currentPage: 1,
        pageSize: 10,
        total: 0,
        pageSizes: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 1000],
        layout: "sizes, total, prev, pager, next, jumper",
      },
      dataTime: [
        {
          id: 1,
          time: "2020"
        },
        {
          id: 2,
          time: "2021"
        },
        {
          id: 3,
          time: "2022"
        }
      ],
      regionArray: [
        // 全市 盐化新区 洪泽区 盱眙县 涟水县 金湖县 淮阴区 清江浦区
        { name: "全市", label: "" },
        { name: "盐化新区", label: "yhxq" },
        { name: "洪泽区", label: "hzq" },
        { name: "盱眙县", label: "xyx" },
        { name: "涟水县", label: "lsx" },
        { name: "金湖县", label: "jhx" },
        { name: "淮阴区", label: "hyq" },
        { name: "清江浦区", label: "qjpq" }
      ],
      yearArray:[
        { name: "2020", label: "2020" },
        { name: "2021", label: "2021" },
        { name: "2022", label: "2022" }
      ],
      // 过滤器
      filter: {
        address: "",
        year: "2020",
      },
      cur: 0
    };
  },
  methods: {
    setHeight(){
      this.$el && this.$nextTick(()=>{
        let mainHeight =  window.innerHeight - document.querySelector('.header-container').offsetHeight - 12,
          header = this.$refs.head ? this.$refs.head.$el : null,
          boxs = this.$el.querySelectorAll('.box'),
          total = this.$el.querySelector('.card'),
          tableTool = this.$el.querySelector('.l-middle'),
          paddingTop = 20,
          height = mainHeight - paddingTop;
        if(header){
          height -= header.offsetHeight;
        }
        if(total){
          height -= total.offsetHeight;
        }
        if(boxs){
          boxs.forEach(item=>{
            height -= item.offsetHeight;
          })
        }
        if(tableTool){
          height -= tableTool.offsetHeight;
        }
        this.tabelHeight = height + 'px';
      })
    },
    toAnther(id) {
      this.cur = id;
    },
    getData(retry=false){
      this.tableData = [];
      setTimeout(()=>{
        for (let index = 0; index < this.pageOption.pageSize; index++) {
          this.tableData.push({
            date: "2016-05-03",
            name: "江苏邦红科技有限公司",
            address: "苏淮高新区",
            object: "56",
            goal: "53%",
            ability: 235
          })
        }
        if(retry){
          this.pageOption.total = parseInt(Math.random()*1000);
        }
      },1000);
    },
    tableRowStyle({ columnIndex }) {
      if (columnIndex === 3 || columnIndex === 5) {
        //第3列字体颜色是红色
        return "color:#4D7EE9;!important;text-decoration: underline;";
      }
    },
    handleSizeChange(val) {
      this.pageOption.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.pageOption.currentPage = val;
      this.getData();
    },
    exportExcel(){
      this.$message.info('暂未开放');
    },
    init(){
      console.log(this.pageOption,this.filter)
      setTimeout(()=>{
        this.total = {
          target:parseInt(Math.random()*1000),
          complianceRate:parseInt(Math.random()*100)
        };
        this.getData(true);
      },300);
    }
  },
  watch: {
    filter: {
      handler() {
        this.init();
      },
      deep: true,
    },
  },
  resizeMain:null,
  mounted() {
    
  this.init(true);
    if (IEVersion() == -1) {
      resizeObserver(
        this.$el,
        () => {
          this.setHeight();
        },
        this.resizeMain
      );
    }
  },
  destroyed(){
    if(IEVersion() == -1){
      this.resizeMain && this.resizeMain.disconnect();
    }
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  text-align: left;
  background: #f3f5fb;
  
  .box {
    padding: 20px;
    max-width: calc(100% - 40px);
    :deep .el-radio-button {
      &.is-active .el-radio-button__inner {
        background-color: #5184ea;
        position: relative;
        &::after{
            content: "";
            position: absolute;
            bottom: -10px;
            left: 50%;
            border-top: 5px solid #5184EA;
            border-left: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-right: 5px solid transparent;
        }
      }
    }
    &.noAfter{
      :deep .el-radio-button.is-active .el-radio-button__inner::after{
        display: none;
      }
    }
  }
  
  .total{
    padding: 20px 28px;
    display: flex;
    justify-content: space-between;
    .item{
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 60px;
      border-radius: 6px;
      background: #F2F0FF;
      max-width: 48%;
      &.purple{
        background: #F2F0FF;
      }
      &.green{
        background: #e6f6f3;
      }
      span{
        padding-left: 20px;
        font-size: 18px;
        font-family: Arial;
        font-weight: 400;
        color: #5D6C8E;
        i{
          font-style: unset;
          color: #364064;
          font-weight: 600;
        }
      }
    }
  }
}

.query {
  position: relative;
  //width: 100%;

  background: #ffffff;
  border: 1px solid #dadfea;
  box-shadow: 0px 0px 19px 1px rgba(116, 118, 138, 0.16);

  .query-time {
    cursor: pointer;
    display: flex;
    margin-left: 26px;
    margin-top: 31px;

    .time-box1:active {
      background-color: #5184ea;
    }

    .time-box1 {
      width: 99px;
      height: 36px;
      background: #f0f4f9;
      border: 1px solid #e3e6ec;
      border-radius: 6px 4px 4px 6px;
      text-align: center;
    }

    .active {
      background: #5184ea !important;
      color: #fefefe !important;
    }
  }
}

  .l-middle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;

    span {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #5d6c8e;
      line-height: 23px;
    }

    .derive {
      width: 82px;
      height: 32px;
      background: linear-gradient(90deg, #5177e4 0%, #5186eb 100%);
      box-shadow: 0px 2px 4px 0px rgba(81, 133, 235, 0.5);
      border-radius: 4px;
      color: #ffffff;
      line-height: 23px;
      border: 0;
      cursor: pointer;
    }
  }

.query-table {
  padding: 15px 28px;
  //width: 100%;
  //margin-top: 35px;
}

:deep .el-table__header-wrapper {
  height: 46px;
  line-height: 22px;
}
</style>

